<template>
    <div class="chartContainer">
        <div id="barChart" class="chart-wrap"></div>
        <div id="pieChart" class="chart-wrap"></div>
        <div id="lineChart" class="chart-wrap"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    var barChart = echarts.init(document.getElementById('barChart'));
    var barOption = {
      title: { text: '收支统计' },
      tooltip: {},
      legend: { data:['收支统计'] },
      xAxis: { data: ['挂号收入', '药品收入', '检查收入', '手术收入', '住院收入'] },
      yAxis: {},
      series: [{ name: '收支统计', type: 'bar', data: [10000, 20000, 30000, 45000, 5200] }]
    };
    barChart.setOption(barOption);

    var pieChart = echarts.init(document.getElementById('pieChart'));
    var pieOption = {
      title: {
        text: '收支统计',
        subtext: '收支统计',
        x: 'center'
      },
      tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
      legend: {
        data: ['挂号收入', '药品收入', '检查收入', '手术收入', '住院收入'],
        left: "center",
        top: "bottom",
        orient: "horizontal"
      },
      series: [{
        name: '消费来源',
        type: 'pie',
        radius: '50%',
        data: [
          {value: 10000,  name: '挂号收入'},
            
          {value: 20000, name: '药品收入'},
          {value: 30000,  name: '检查收入'},
          {value: 45000, name: '手术收入'},
          {value: 5200, name: '住院收入'}
        ],
        emphasis: {
          itemStyle: { 
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };
    pieChart.setOption(pieOption);

    var lineChart = echarts.init(document.getElementById('lineChart'));
    var lineOption = {
      title: { text: '收支统计' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', boundaryGap: false, data: ['挂号收入', '药品收入', '检查收入', '手术收入', '住院收入'] },
      yAxis: { type: 'value' },
      series: [{
        data: [10000, 20000, 30000, 45000, 5200],
        type: 'line',
        areaStyle: {},
       
      }]
    };
    lineChart.setOption(lineOption);
  }
}
</script>

<style scoped>
.chartContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.chart-wrap {
    width: 30%;
    height: 400px;
    margin-bottom: 20px;
}
</style>